<script setup lang="ts">

import {computed} from "vue";

interface Props {
  deskNum:number;
  seatStatus:number[];
}
interface Emits {
  (e:"choose",seat:number[]):void;
}
const props = defineProps<Props>()
const emits = defineEmits<Emits>()
const baseIndex = computed(():number=> (props.deskNum-1)*4)
const onChoose = (index:number) => {
  emits("choose",[props.deskNum,index])
}
</script>

<template>
<view class="desk">
  <view class="seat">
    <view @tap="onChoose(1)" v-if="props.seatStatus[baseIndex+1]">选择</view>
    <view v-if="!props.seatStatus[baseIndex+1]"></view>
    <view @tap="onChoose(2)" v-if="props.seatStatus[baseIndex+2]">选择</view>
    <view v-if="!props.seatStatus[baseIndex+2]"></view>
  </view>
  <view class="desk-center">
    <view class="row">
      <view>1</view>
      <view>2</view>
    </view>
    <view class="row">{{props.deskNum}}号</view>
    <view class="row">
      <view>3</view>
      <view>4</view>
    </view>

  </view>
  <view class="seat">
    <view @tap="onChoose(3)" v-if="props.seatStatus[baseIndex+3]">选择</view>
    <view v-if="!props.seatStatus[baseIndex+3]"></view>
    <view @tap="onChoose(4)" v-if="props.seatStatus[baseIndex+4]">选择</view>
    <view v-if="!props.seatStatus[baseIndex+4]"></view>
  </view>
</view>
</template>

<style scoped lang="scss">
.desk{
  width: inherit;
  height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  .seat{
    width: 100%;
    height: 20%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    color: #dd524d;
  }
  .desk-center{
    width: 100%;
    height: 60%;
    background-color: #dd524d;
    border-radius: 24rpx;
    display: flex;
    flex-direction: column;
    color: #ffffff;
    justify-content: center;
    .row{
      display: flex;
      justify-content: space-around;
    }
  }
}
</style>